import { Card, Divider } from 'antd';

import clsx from 'clsx';
import classNames from 'classnames/bind';

import styles from './style.module.less';
console.log(styles);

function createStyles(data: CSSModuleClasses) {
	const styles = data;
	return (...args: string[]) => {
		const names: string[] = [];
		for (const key of args) {
			if (styles[key]) {
				names.push(styles[key]);
			}
		}
		return names.join(' ');
	};
}

const sty = createStyles(styles);
const cl = clsx.bind(styles);
const cx = classNames.bind(styles);

const ClsxTest = () => {
	return (
		<Card>
			<div className={sty('content', 'text')}>
				<div className={sty('son')}>自定义方法</div>
			</div>
			<Divider />
			{/* 样式不生效 */}
			<div className={cl('_content_1nmbn_1')}>clsx</div>
			<Divider />
			{/* 有样式 */}
			<div className={cx('content', 'text')}>classnames/bind</div>
		</Card>
	);
};

export default ClsxTest;
